<template>
  <!-- 会员管理 -->
  <div class="user">
    <!--搜索表单-->
    <!-- <div class="common-seach-wrap">
            <el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="关键字查询">
                    <el-input v-model="searchForm.keyword" 
                         @keyup.enter.native="onSubmit"
                    placeholder="关键字查询"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
    </div>-->
    <!--内容-->
    <!-- <el-button style="margin: 10px;" type="primary" @click="addClick">添加券包</el-button> -->
    <div class="product-content">
      <div class="table-wrap">
        <el-table size="small" :data="tableData" border style="width: 100%" v-loading="loading" stripe>
          <el-table-column prop="title" label="券包标题"></el-table-column>
          <el-table-column prop="price" label="会员券包价格"></el-table-column>
          <el-table-column prop="giveBalance" label="赠送余额"></el-table-column>
          <el-table-column prop="gradeId" label="券包等级">
            <template #default="scope">
              <el-select v-model="scope.row.gradeId" disabled>
                <el-option v-for="item in leves" :label="item.name" :value="item.gradeId"
                  :key="item.gradeId"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="maxBuyCount" label="用户可购买次数"></el-table-column>
          <el-table-column prop="statis" label="状态">
            <template #default="scope">
              <el-tag type="success" v-if="scope.row.status === 1">有效</el-tag>
              <el-tag type="error" v-else>无效</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column fixed="right" label="操作" width="190">
            <template #default="scope">
              <el-button @click="sendClick(scope.row)" type="text" size="small">发送</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog title="选择用户" v-model="customerShow" top="10vh" width="45%">
      <p style="margin: 10px 0px;padding:0px">
        <el-input size="small" v-model="userForm.keyword" placeholder="请输入关键字查询" style="width:40%">
          <template #append>
            <el-button type="primary" @click="onSelectUserSearch">查询</el-button>
          </template>
        </el-input>
      </p>
      <el-table style="width: 100%" v-loading="utableLoading" :data="khList" max-height="300">
        <el-table-column prop="userId" label="ID" width="100" />
        <el-table-column prop="realName" label="客户名称" width="180" />
        <el-table-column prop="nickName" label="客户昵称" />
        <el-table-column prop="mobile" label="手机号" width="100" />
        <el-table-column prop="controls" label="操作" width="100" fixed="right">
          <template #default="scope">
            <el-button :type="scope.row.userId === selectUserId ? 'primary' : ''" @click="userSopeSelect(scope.row)">{{ scope.row.userId === selectUserId ? '已选' : '选择' }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageselect">
        <el-pagination background @current-change="khCurrentChange" layout="prev, pager, next" :page-size="5" :total="khTotal" />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="onSelectUserCacnle">关闭</el-button>
          <el-button type="primary" @click="onSelectUserSave" :loading="btnLoad">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import PackageApi from '@/api/package'
import { defaultPageSize } from '@/utils/table.js'
import UserApi from '@/api/user'
import { ElMessage } from 'element-plus';
export default {
  data() {
    return {
      /*是否加载完成*/
      loading: false,
      /*列表数据*/
      tableData: [],
      /*一共多少条数据*/
      totalDataNumber: 0,
      searchForm: {
        pageIndex: 1,
        pageSize: defaultPageSize,
        keyword: '',
        pageSorts: []
      },
      leves: [],
      customerShow: false,
      customerRow: null,
      selectUserId: '',
      orderProducts: [

      ],
      userForm: {
        pageIndex: 1,
        pageSize: 5,
        keyword: ''
      },
      utableLoading: false,
      postForm: {
        userName: '',
        userId: '',
        packageId: ''
      },
      btnLoad: false
    };
  },
  created() {
    this.loadLevels()
    this.getTableList();

  },
  methods: {
    /*选择第几页*/
    handleCurrentChange(val) {
      let self = this;
      self.searchForm.pageIndex = val
      self.getTableList();
    },
    /*获取列表*/
    getTableList() {
      let self = this;
      self.loading = true
      PackageApi.getAllPackage(true)
        .then((res) => {
          self.loading = false;
          const { code, data } = res
          if (code === 1) {
            self.tableData = data.records
          }
          console.log('券包列表数据', res)
        })
        .catch((error) => {
          self.loading = false;
        });
    },
    /*搜索查询*/
    onSubmit() {
      let self = this;
      self.searchForm.pageIndex = 1;
      self.getTableList();
    },
    userSopeSelect(row) {
      this.customerRow = row
      this.selectUserId = row.userId
    },
    /*打开编辑*/
    sendClick(item) {
      this.postForm.packageId = item.id
      this.customerShow = true
      this.loadKhList()
    },
    loadLevels() {
      const $this = this
      PackageApi.getAllGrade()
        .then(result => {
          const { code, data } = result
          if (code === 1) {
            $this.leves = data
          }
        })
    },
    onSelectUserSearch() {
      this.userForm.pageIndex = 1
      this.loadKhList()
    },
    loadKhList() {
      const $this = this
      $this.utableLoading = true
      UserApi.getUserList($this.userForm, true)
        .then(result => {
          $this.utableLoading = false
          const { code, data } = result
          if (code === 1) {
            $this.khTotal = data.total
            $this.khList = data.records
              .map(d => {
                return {
                  realName: d.realName,
                  nickName: d.nickName,
                  mobile: d.mobile,
                  userId: d.userId
                }
              })
          }
          console.log('客户信息'.result)
        }).catch(error => {
          $this.utableLoading = false
        })
    },
    khCurrentChange(index) {
      this.userForm.pageIndex = index
      this.loadKhList()
    },
    onSelectUserCacnle() {
      this.customerShow = false
      this.userForm.keyword = ''
      this.customerRow = null
      this.selectUserId = ''
    },
    onSelectUserSave() {
      if (!this.selectUserId) {
        ElMessage.error('请选择用户')
        return
      }
      this.postForm.userId = this.selectUserId
      this.postForm.userName = this.customerRow.realName
      this.userForm.keyword = ''
      this.selectUserId = ''

      console.log('thisss', this.postForm)
      this.sendPackage()
    },
    sendPackage() {
      const $this = this
      $this.btnLoad = true
      PackageApi.sendPackage(this.postForm, true)
        .then(res => {
          const { code, msg } = res
          $this.btnLoad = false
          if (code === 1) {
            ElMessage.success(msg)

            this.customerShow = false
          } else {
            ElMessage.error(msg)
          }

        }).catch(err => {
          console.log(err)
          $this.btnLoad = false
        })

    }
  },
};
</script>
<style scoped>
.pageselect {
  padding: 10px 0px;
  text-align: right;
  float: right;
}
</style>